<template>
    <!-- //用来放echarts图表的容器，一定要有宽高 -->
    <div
        :id="props.id"
        :style="{ width: props.width, height: props.height }"
    ></div>
</template>

<script setup>
import {
    nextTick,
    onMounted,
    onUnmounted,
    ref,
    defineProps,
    watch,
    markRaw,
} from "vue";
import * as echarts from "echarts";
import { deepClone2 } from "@/utils/tool.js";

const props = defineProps({
    id: {
        type: String,
        default: "chartslinef",
    },
    width: {
        type: String,
        default: "100%",
    },
    height: {
        type: String,
        default: "450px",
    },
    options: {
        type: Object,
        default: {},
    },
});

const xLabel = ["1月", "2月", "3月", "4月", "5月", "6月"];
const goOutSchool = [100, 200, 300, 200, 300, 100];

const chart = ref(null);
const saveOptions = ref({
    tooltip: {
        trigger: "axis",
    },
    legend: {
        data: ["Email", "Union Ads"],
    },
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
        type: "value",
    },
    series: [
        {
            name: "Email",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            data: [150, 182, 191, 234, 120, 280, 250],
        },
    ],
});

// 初始化echart图表
const initChart = () => {
    let dom = document.getElementById(props.id);
    chart.value = markRaw(echarts.init(dom));
    chart.value.setOption(saveOptions.value);
};

watch(
    () => props.options,
    () => {
        saveOptions.value = deepClone2(props.options);
    }
);

onMounted(() => {
    nextTick(() => {
        initChart();
    });
});

onUnmounted(() => {
    if (!chart.value) return;
    chart.value.dispose();
    chart.value = null;
});
</script>

<style lang="scss" scoped>
</style>